<template>
  <a-card>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="基本信息" key="1">
        <div class="btn-style">
          <a-form layout="inline" :model="model" :rules="rules" ref="rulesRef" autoComplete="off"
            class="modal-form-style">
            <a-form-item name="parentDeptCode" label="上级部门名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-tree-select v-model:value="model.parentDeptCode" show-search style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择上级部门" allow-clear
                :tree-data="treeData" tree-node-filter-prop="label" @change="createDeptCode"
                :field-names="{ children: 'children', label: 'title', value: 'key', }">
              </a-tree-select>
            </a-form-item>
            <a-form-item name="deptCode" label="部门编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model:value="model.deptCode" placeholder="请输入部门编码" allowClear :disabled="true" />
            </a-form-item>
            <a-form-item name="deptName" label="部门名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model:value="model.deptName" placeholder="请输入部门名称" allowClear />
            </a-form-item>
            <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-switch v-model:checked="model.status" checked-children="启用" un-checked-children="停用" />
            </a-form-item>
            <a-form-item label="排序码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input-number v-model:value="model.orderNo" placeholder="请输入排序码" allowClear style="width: 100%" />
            </a-form-item>
            <div style="width: 100%;">
              <a-button type="primary" @click="handleSave" style="float: right;">
                <template #icon>
                  <SaveOutlined />
                </template>保存
              </a-button>
              <a-button @click="handleReset" style="float: right;">
                <template #icon>
                  <ReloadOutlined />
                </template>重置
              </a-button>
            </div>
          </a-form>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { getAction, postAction } from '@/utils/httpAction';
import { defineProps } from 'vue';

const url = {
  getDeptTree: '/system/dept/getDeptTree',
  getChildDeptTree: '/system/dept/getChildDeptTree',
  getSelectedDept: '/system/dept/getSelectedDept',
  createDeptCode: '/system/dept/createDeptCode',
}

const model = reactive({
  id: '',
  deptCode: '',
  parentDeptCode: undefined as string | undefined,
  deptName: '',
  status: true,
  orderNo: '',
})

const labelCol = { span: 4 };
const wrapperCol = { span: 18 };
const props = defineProps<{ selectedKey: string }>();
const treeData = ref();

const rulesRef = ref()
const rules: Record<string, Rule[]> = {
  deptName: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
  ],
}
const handleSave = () => {
  console.log('保存')
}

const handleReset = () => {
  console.log('重置')
}

const getDeptTree = async () => {
  treeData.value = await getAction(url.getDeptTree, {});
}

const getChildDeptTree = async (parentDeptCode: string) => {
  treeData.value = await getAction(url.getChildDeptTree, { parentDeptCode });
}

const getSelectedDept = async (deptCode: string) => {
  const res: any = await getAction(url.getSelectedDept, { deptCode });
  model.id = res.id;
  model.deptCode = res.deptCode;
  model.deptName = res.deptName;
  model.status = res.status;
  model.orderNo = res.orderNo;
}

const createDeptCode = async (value: string) => {
  console.log(value,'ddddddddddd');
  
  const res = await postAction(url.createDeptCode, { parentDeptCode: value });
  console.log(res,'eeeeeeee');
  
  model.deptCode = value;
}

watch(() => props.selectedKey, (newVal, oldVal) => {
  if (!props.selectedKey) {
    model.id = '';
    model.parentDeptCode = undefined;
    model.deptName = '';
    model.status = true;
    model.orderNo = '';
    createDeptCode('');
    getDeptTree();
  } else {
    model.parentDeptCode = props.selectedKey;
    getSelectedDept(props.selectedKey);
    getChildDeptTree(props.selectedKey);
  }
})

</script>